<template>
	<div class="nav">
		<div class="spread" @click="spreadClick">
			<i v-if="spread" class="font el-icon-s-unfold"></i>
			<i v-else class="font el-icon-s-fold"></i>
		</div>
		<div class="breadcrumb">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>{{breadcrumbArr[1]}}</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!-- 头像 -->
		<div class="right">
			<el-dropdown trigger="click">
				<div class="people">
					<span>程序猿</span>
					<img class="people-image" src="../../../assets/image/login/d.png" />
				</div>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item>个人中心</el-dropdown-item>
						<el-dropdown-item>退出</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</div>
	</div>
</template>
<script setup>
	import {
		ref,
		defineEmits,
		defineExpose,
		onMounted
	} from 'vue'
	import store from '@/common/utils/store'
	let spread = ref(false),
		breadcrumbArr = ref([]),
		emit = defineEmits(),
		spreadClick = () => {
			spread.value = !spread.value
			emit('spread', spread.value)
		},
		refreshTag = () => {
			if (store.breadcrumb) {
				breadcrumbArr.value = store.breadcrumb
			} else {
				breadcrumbArr.value = ['数据统计']
			}
		}
	onMounted(() => {
		refreshTag()
	})
	defineExpose({
		refreshTag
	})
</script>
<style lang="scss" scoped>
	.nav {
		height: 50px;
		background-color: white;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: relative;

		.right {
			position: absolute;
			right: 20px;
			top: 50%;
			transform: translate(0, -50%);

			.people {
				display: flex;
				align-items: center;
				cursor: pointer;

				span {
					font-size: 14px;
					margin-right: 5px;
				}

				.people-image {
					width: 40px;
					height: 40px;
				}
			}
		}

		.breadcrumb {
			margin-left: 40px;
			margin-top: -2px;
		}

		.spread {
			cursor: pointer;
			margin-left: 20px;

			.font {
				font-size: 26px;
				color: rgb(96, 98, 102);
			}
		}
	}
</style>
